<template>
  <view :class="classes">
    <!-- <rich-text
      class="chat-text"
      :nodes="content"
      :selectable="true"
    ></rich-text> -->
    <text class="chat-text" :selectable="true">{{ data.content }}</text>
  </view>
</template>

<script>
import parseHtml from "./parseHtml.js";

export default {
  props: {
    data: {
      type: Object,
      default: () => {},
    },
    right: Boolean,
  },
  data() {
    return {
      parseHtml,
    };
  },
  computed: {
    classes() {
      return `chat-text-wrap ${this.data.right ? "chat-text-right-wrap" : ""}`;
    },
    content() {
      // root节点为div时, 内容会多占一空行, 移除掉div
      let arr = this.parseHtml(this.data.content);
      if (arr.length && arr[0].name === "div") {
        let children = JSON.parse(JSON.stringify(arr[0].children));

        arr = arr.slice(1);
        arr.unshift(...children);
      }

      return arr;
    },
  },
};
</script>

<style lang="scss">
.chat-text-wrap {
  padding: 20rpx 24rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 16rpx;
  max-width: 70vw;

  .chat-text {
    color: rgba(51, 51, 51, 100);
    font-size: 32rpx;
    white-space: pre-wrap; /* 保留换行符 */
    word-wrap: break-word; /* 允许长单词换行 */
    overflow: visible; /* 允许内容溢出 */
  }

  &.chat-text-right-wrap {
    // background-color: #1E89FF;
    // direction: ltr;

    // .chat-text {
    // 	color: white;
    // 	text-align: left;
    // 	background-color: rgba($color: #000000, $alpha: 0);
    // }
  }
}
</style>
